<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width,initial-scale=1"/>
<title>我的订单</title>
<link rel="stylesheet" href="${ctxStatic}/jiujiudevice/css/public.css" />	
<script type="text/javascript"
	src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>

<style>
#tip {
	margin-bottom: 0px;
	color: grey;
	font-size: 14px;
}
/* 空提示 */
.empty_container {
	margin: 100px 0;
	text-align: center
}

.empty_container p {
	margin-top: 20px;
	padding-top: 100px;
	background: url(../img/empty_content.png) no-repeat center 0;
	background-size: 90px 90px;
	color: #888
}
				
			.yin{
				
				background-color:rgba(0, 0, 0, 0.5);								
				width: 100%;
				height: 100%;								
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9999;
				display: none;
			}
			.loading{
				line-height: 50px;
				width: 200px;
				height: 50px;
				display: none;
				background-color: rgba(23, 21, 21, 0.51);
				position: fixed;
				top: 40%;
				left: 50%;
				margin: -25px 0 0 -100px;
				z-index: 5;				
				border-radius: 5px;
				-webkit-border-radius: 5px;
				color: #fff;
				text-align: center;
			}
			.loading img {
			 position:absolute;
			 top:10px;
			 left:10px;
			}
		
		
</style>
</head>

<body style="background: #f6f6f6 !important; z-index :1 " >
	<!-- <div class="fade">
		<div class="alert">
			<p class="alert-title">温馨提示</p>
			<p class="alert-desc">点击确认后将开始计费，确认开始吗？</p>
			<div class="box flex-center button">
				<button class="h2" onclick="$('.fade').hide()">取消</button>
				<button class="h2" style="color: #FC495A;">确定</button>
			</div>
		</div>
	</div> -->
		<div class="fade" id="myModal" style="display:none">
			<div class="alert">
				<p class="alert-title">温馨提示</p>
				<p class="alert-desc">您确定要删除该订单吗?</p>
				<div class="box flex-center button">
					<button class="h2" onclick="$('.fade').hide()">取消</button>
					<button class="h2" style="color: #FC495A;" id="yes">确定</button>
				</div>
			</div>
		</div>
	<div class="tab-categer">
		<ul class="box flex-center">
			<li class="tab-categer-active" id="payall">全部</li>
			<li id="payN">未支付</li>
			<li id="payY">已支付</li>
		</ul>
	</div>
			<div class="yin">
		</div>
		<div class="loading" >			
			 <img alt="" src="${ctxStatic}/jiu/img/icon32_loading_dark.gif">正在加载，请稍后...	
		</div>
	<div id="productContainer">
	
	</div>
		<!-- <div class="p-top" style="margin-bottom: 0;">
			<p class="p-title" style="font-size: 16px;">久久印刷机</p>
			<div class="p-desc">
				<p>设备名称 悦达全自动印刷机</p>
				<p>设备SN ASno.214444SDF</p>
			</div>
		</div>
		<ul class="o-user-list box flex-between">
			<li>
				<p>使用时长</p>
				<p>01:02:05</p>
			</li>
			<li>
				<p>开始时间</p>
				<p>01:02:05</p>
			</li>
			<li>
				<p>结束时间</p>
				<p>01:02:05</p>
			</li>
			<li>
				<p>消费金额</p>
				<p>01:02:05</p>
			</li>
		</ul>
		<div class="order-bottom box flex-between">
			<span>2018年07-12 | 12:23</span>
			<div class="box">
				<i class="iconfont icon-shanchu"></i> <i style="margin-left: 8px;">删除</i>
			</div>
		</div> -->
</body>
<script>

function getLocalTime(nS) {  
    var date = new Date(nS);
    return date.Format("MM-dd hh:mm:ss",date); 
} 

function getTime(nS) {  
    var date = new Date(nS);
    return date.Format("yyyy-MM-dd | hh:mm",date); 
} 
	$(function() {
		Date.prototype.Format = function (fmt) { //author: meizz 
		    var o = {
		        "M+": this.getMonth() + 1, //月份 
		        "d+": this.getDate(), //日 
		        "h+": this.getHours(), //小时 
		        "m+": this.getMinutes(), //分 
		        "s+": this.getSeconds(), //秒 
		        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
		        "S": this.getMilliseconds() //毫秒 
		    };
		    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		    for (var k in o)
		    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		    return fmt;
		}
		$(".tab-categer li").click(function() {
			$(".tab-categer li").removeClass("tab-categer-active");
			$(this).addClass("tab-categer-active")
		})
	})

	var states = '';
	var pageNo = 1;
	//获取滚动条当前的位置 

	function getScrollTop() {

		var scrollTop = 0;

		if (document.documentElement && document.documentElement.scrollTop) {

			scrollTop = document.documentElement.scrollTop;

		}

		else if (document.body) {

			scrollTop = document.body.scrollTop;

		}

		return scrollTop;

	}

	//获取当前可是范围的高度 

	function getClientHeight() {

		var clientHeight = 0;

		if (document.body.clientHeight && document.documentElement.clientHeight) {

			clientHeight = Math.min(document.body.clientHeight,
					document.documentElement.clientHeight);

		}

		else {

			clientHeight = Math.max(document.body.clientHeight,
					document.documentElement.clientHeight);

		}

		return clientHeight;

	}

	//获取文档完整的高度 

	function getScrollHeight() {

		return Math.max(document.body.scrollHeight,
				document.documentElement.scrollHeight);

	}
  
	window.onscroll = function() {


		if (getScrollTop() + getClientHeight() == getScrollHeight()) {
			if (pageNo != '1') {
				pullupRefresh();
			}

		}

	}

 	$(function() {
		pullupRefresh();
	});

	var timestamp = Date.parse(new Date());
	$(document).ready(function() {
		$("#payN").click(function() {
			$(".loading").show();
 			gaibian(0);//未支付
 	});
		$("#payY").click(function() {
			$(".loading").show();
 			gaibian(1);//已支付
 		});
		$("#payall").click(function() {
			$(".loading").show();
			gaibian(''); 
		});
		$('.btn').click(function() {
			$('.loading').fadeIn().delay(3000).fadeOut();
			$('.yin').fadeIn(300).delay(3000).fadeOut();
		})
	});

	/**改变订单状态*/
	function gaibian(state) {
		pageNo = 1;
		states = state;
		var cha = Date.parse(new Date()) - timestamp;

		timestamp = Date.parse(new Date());
		console.log(cha);
/* 		if (cha > 1000) {
 */			pullupRefresh();
		/* } */
	}

	/**

	 * 上拉加载具体业务实现

	 */

	var ajaxFlag = 1;

	function pullupRefresh() {

		$
				.get(
						"${ctxFront}/testOrder/ajaxOrder?v=" + Math.random(),
						{
							pageNo : pageNo,
							pageSize : 15,
							states : states
						},
						function(data) {
							var innerHTML = "";
							var list = data.oList;
								$(".loading").hide();
							
							if (pageNo == 1) {
								$("#productContainer").empty();
								if (list.length == 0) {
									innerHTML += '<div class="empty_container">'
											+ '<p style="font-size: 16px;">暂时无订单</p>'
											+ '</div>';
								}
							}
							
							pageNo++;
							$
									.each(
											list,
											function(i, n) {
												
												if(n.status == 0 && n.endTime != null){
													innerHTML += '<div class="order-div" onclick="getPay(\'' +n.orderNo + '\')"><div class="p-top" style="margin-bottom: 0;" ><p class="p-title" style="font-size: 16px;">久久印刷机</p><p style="float:right;margin-right:10px;">';
												}else{
													if(n.status == 1 && n.endTime != null){
														//已经支付的订单
													    innerHTML += '<div class="order-div" onclick="getPayDetail(\''+n.orderNo + '\')"><div class="p-top" style="margin-bottom: 0;"><p class="p-title" style="font-size: 16px;">久久印刷机</p><p style="float:right;margin-right:10px;">';
													}else{
														//使用中的订单
													    innerHTML += '<div class="order-div" onclick="getUseTimePage(\''+n.deviceSn + '\')"><div class="p-top" style="margin-bottom: 0;"><p class="p-title" style="font-size: 16px;">久久印刷机</p><p style="float:right;margin-right:10px;">';
													}
												}
												if (n.status == 0 && n.endTime != null) {
													//未支付,已使用
													innerHTML += '<span style="color:red;font-size:16px;">未支付</span>';	
												}
												if (n.status == 0 && n.endTime == null) {
													//未支付，使用中
													innerHTML += '<span style="color:#f7c159;font-size:16px;">使用中</span>';	
												}
												if(n.status == 1){
													innerHTML += '<span style="color:green;font-size:16px;">已支付</span>';
												}
												if(n.status == 2){
													innerHTML += '<span style="color:red;font-size:16px;">已退款</span>';
												}
												innerHTML += '</p><div class="p-desc"><p>设备名称 '
														+ n.deviceName+'</p><p>设备SN '+n.deviceSn+'</p></div></div>';
												
												if(n.status == 0 && n.endTime != null){
										                innerHTML += '<ul class="o-user-list box flex-between" onclick="getPayDetail(\''+n.orderNo + '\')"><li><p>使用时长</p>';
												}else{
													   innerHTML += '<ul class="o-user-list box flex-between" onclick="getUseTimePage(\''+n.deviceSn + '\')"><li><p>使用时长</p>';

												}
										         if(n.jiuOrderLog.deviceUseTimeStr != null &&  n.jiuOrderLog.deviceUseTimeStr != 'undefined' ){
										        	 innerHTML += '<p>'+ n.jiuOrderLog.deviceUseTimeStr +'</p>';
										         }else{
										        	 innerHTML += '<p>正在使用中</p>';
										         }
										         innerHTML += '</li><li><p>开始时间</p><p>'+getLocalTime(n.beginTime)+'</p></li><li><p>结束时间</p>';
										         if(n.endTime != null ){
										        	 innerHTML +='<p>'+getLocalTime(n.endTime)+"</p>";
										         }else{
										        	 innerHTML += '<p>正在使用中</p>';
										         }
										         innerHTML += '</li><li><p>消费金额</p>';
										         if(n.amount != null && n.amount >0){
										        	 innerHTML += '<p>'+n.amount+'元</p></li>';
										         }else{
										        	 innerHTML += '<p>正在计费中</p></li>';
										         }										
													innerHTML+='</ul><div class="order-bottom box flex-between"><span>'+getTime(n.createTime)+'</span>';
													if(n.status == 1 || n.status == 2  ){//不是支付状态，可删除
														innerHTML += '<div class="box" id="delete" onclick="deleteOrder('+n.id+')"><i class="iconfont icon-shanchu"></i> <i style="margin-left: 8px; ">删除</i></div>';
													}else{
														//如果设备是在使用中，不显示去支付 显示设备使用页面
														if(n.jiuOrderLog.deviceUseTimeStr != null &&  n.jiuOrderLog.deviceUseTimeStr != 'undefined' ){
															innerHTML += '<div class="box"><i class="iconfont icon-money"></i> <i style="margin-left: 8px; color:green; ">去支付</i></div>';
														}else{
															//如果订单已经结束，但是未支付，去支付页面
															innerHTML += '<div class="box"><i class="iconfont icon-money"></i> <i style="margin-left: 8px; color:green; ">详情</i></div>';
														}
													}
														innerHTML += '</div></div>';	
															
												})
									$("#productContainer").append(
											innerHTML);
							 
						})

	};
 
	function deleteOrder(id){
		$('#myModal').show();
		$("#yes").click(function(){
 		  $.ajax({
			 url:'${ctxFront}/testOrder/deleteOrder',
			 type :'POST',
			 data:{id:id},
			 success : function(data){
					alert(data.m);
					$('#myModal').hide();
					window.location.reload();
			 }
			 
		 }); 
		})
		window.event? window.event.cancelBubble = true : e.stopPropagation();
	 }
	
	function getPay(orderNo){
		
		window.location.href="${ctxFront}/jiujiudevice/pay?orderNo="+orderNo+"&v="+Math.random();
	}
	
	function getPayDetail(orderNo){
		window.location.href="${ctxFront}/jiujiudevice/orderDetail?orderNo="+orderNo+"&v="+Math.random();
	}
	
	function getUseTimePage(deviceSn){
		window.location.href="${ctxFront}/jiujiudevice/usetime?deviceSn="+deviceSn+"&v="+Math.random();
	}
</script>

</html>